<template>
  <md-page title="个人信息" isBtn :btnTextItems="data.btnTextItems" @btnClick="bottomBtnClick">
    <div class="container">
      <view class="list">
        <view class="list-item img">
          <view class="left">头像</view>
          <!-- <image class="image" :src="data.info?.avatar || '/static/images/my_head.png'" mode="widthFix"></image> -->
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image class="image" :src="data.info?.avatar || '/static/images/my_head.png'" mode="widthFix"></image>
          </button>
        </view>
        <view class="list-item">
          <view class="left">昵称</view>
          <view class="right" style="text-align: right">
            <input type="nickname" class="nick-input" placeholder="请输入昵称" v-model="data.info.username" />
          </view>
        </view>
        <view class="list-item">
          <view class="left">手机号</view>
          <view class="right">
            {{ data.info?.mobile }}
          </view>
        </view>
      </view>
    </div>
  </md-page>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 接口
import { logout, myUpdateInfo, uploadImage } from '@/api';
import type { My } from '@/api/data';
import { Toast } from '@/utils/util';
import type { BtnTextItem } from '@/components/md-ui/components/md-page/md-page.vue';

const data = reactive<any>({
  btnTextItems: [],
  info: {}, // 用户信息
  configInfo: {},
});

const onChooseAvatar = (e: any) => {
  const { avatarUrl } = e.detail;
  console.log(avatarUrl);
  handleUpload(avatarUrl);
  // this.setData({
  //   avatarUrl,
  // });
};

const bottomBtnClick = async (info: { item: BtnTextItem }) => {
  const { key } = info.item;
  // 提交修改
  if (key === 'submit') {
    uni.showModal({
      title: '提示',
      content: '是否提交修改?',
      success: res => {
        if (res.confirm) {
          fetchMyUpdateInfo(data.info);
        }
      },
    });
  } else {
    // 退出登录
    uni.showModal({
      title: '提示',
      content: '是否确认退出登录',
      success: function (res) {
        if (res.confirm) {
          // console.log('用户点击确定');
          fetchLogout();
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      },
    });
  }
};

/**
 * 接口相关
 */
// 退出登录
const fetchLogout = async () => {
  try {
    await logout();
    uni.navigateBack();
  } catch (error) {}
};

// 上传图片
const handleUpload = (filePath: string) => {
  uni.showLoading({
    title: '图片上传中...',
    mask: true,
  });
  uploadImage({ filePath, formData: { category: 'avatar' } }).then(async res => {
    data.info.avatar = res?.data?.url;
    uni.hideLoading();
  });
};

// 修改信息
const fetchMyUpdateInfo = async (params: My.UpdateInfo.Body) => {
  try {
    const res = await myUpdateInfo(params);
    Toast(res?.msg || '修改成功');
  } catch (error) {}
};

onLoad(option => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
    data.btnTextItems = [
      {
        text: '提交修改',
        key: 'submit',
        color: data.configInfo?.button_color1 || '#d92121',
        textColor: data.configInfo?.button_color1_text || '#ffffff',
      },
      {
        text: '退出登录',
        key: 'logout',
        color: data.configInfo?.button_color1 || '#d92121',
        textColor: data.configInfo?.button_color1_text || '#ffffff',
      },
    ];
  }
  data.info = option?.info ? JSON.parse(option.info) : {};
  // 如果是因为没有设置过头像或者用户名
  console.log(typeof option?.isForce);
  const isForce = option?.isForce === '1';
  console.log(isForce, 'isForce');
  if (isForce) {
    uni.showModal({
      title: '提示',
      content: '请先设置您的昵称与头像',
      showCancel: false,
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定');
        }
      },
    });
  }
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  .list {
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border-radius: 10rpx;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      &:not(:last-of-type) {
        margin-bottom: 20rpx;
      }
      font-size: 28rpx;
      color: $title;
      &.img {
        padding: 14rpx 20rpx;
      }
      .avatar-wrapper {
        border: none;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }
      .image {
        width: 90rpx;
        height: 90rpx;
      }
    }
  }
}
</style>
